var layout = {
    initLayout: function (id, options) {
        var $layout = $(id);
        if (options) {
            var fit = options.fit;
            var width = options.width ? options.width : 0;
            var height = options.height ? options.height : 0;
            var border = options.border != undefined ? '1px' : '0px';

            $layout.css({
                width: (fit ? 'calc(100% - ' + border + ' * 2)' : width + 'px'),
                height: (fit ? 'calc( 100% - ' + border + ' * 2)' : height + 'px'),
                borderWidth: border
            });

            //上下左右。
            var centerLayout = $layout.children('.xy-layout-center');
            if (centerLayout.length > 0) {

                var northLayout = $layout.children('.xy-layout-north');
                var eastLayout = $layout.children('.xy-layout-east');
                var westLayout = $layout.children('.xy-layout-west');
                var southLayout = $layout.children('.xy-layout-south');
                var northOptions = dataOptions(northLayout.attr('data-options'));
                var southOptions = dataOptions(southLayout.attr('data-options'));
                var eastOptions = dataOptions(eastLayout.attr('data-options'));
                var westOptions = dataOptions(westLayout.attr('data-options'));
                var centerOptions = dataOptions(centerLayout.attr('data-options'));
                layout['initNorth'].call(this, $layout, northOptions, northLayout);
                layout['initWest'].call(this, $layout, westOptions, northOptions, westLayout, southLayout, eastLayout, centerLayout);
                layout['initCenter'].call(this, $layout, northOptions, southOptions, westOptions, eastOptions, centerOptions, centerLayout);
                layout['initEast'].call(this, $layout, eastOptions, northOptions, southOptions, eastLayout, centerLayout, westLayout);
                layout['initSouth'].call(this, $layout, southOptions, westOptions, southLayout);
            } else {
                $layout.html("<h1>警告布局必须有中间区域！</h1>");
            }
        }
    },
    //初始化西部区域
    initWest: function ($layout, westOptions, northOptions, westLayout, southLayout, eastLayout, centerLayout) {
        //获取设置的西部区域宽高
        var width = westOptions.width;//西部区域的宽度
        var nHeight = northOptions.height;//北部区域的高度
        var borderWidth = westOptions.borderWidth;//是否有边框

        var height = 'calc(100% - ' + nHeight + ' - ' + borderWidth + ' * 2)';
        var width = 'calc(' + width + ' - ' + borderWidth + ' * 2)';
        westLayout.css({
            width: width,
            height: height,
            top: nHeight,
            borderWidth: borderWidth,
            minWidth: westOptions.minWidth,
            maxWidth: westOptions.maxWidth,
            minHeight: westOptions.minHeight,
            maxHeight: height
        });
        //判断是否可调整大小
        var spilt = westOptions.split;
        if (spilt) {
            westLayout.css({borderRightWidth: '2px'});
            westLayout.resizable2({
                handles: 'e',
                minWidth: westOptions.minWidth,
                maxWidth: westOptions.maxWidth,
                ghost: true,
                stop: function (event, ui) {
                    //获取移动之后的宽度
                    var nowWidth = $(this)[0].offsetWidth;
                    console.info(nowWidth);
                    console.info(ui);
                    console.info();
                    //获取移动之前的宽度
                    var oldWidth = ui.originalSize.width;
                    //计算出移动的距离
                    var changeSize = oldWidth - nowWidth;
                    //获取父容器宽度
                    var layoutWidth = $layout.width();
                    //计算移动后的西部区域占布局宽度的百分比
                    // nowWidth = (nowWidth / layoutWidth).toFixed(2) * 100 + "%";
                    nowWidth += 'px';
                    //设置缩放后西部区域宽度，为了能够继续适配响应窗口
                    westLayout.css({width: 'calc(' + nowWidth + ' - 2px)', height: height, top: nHeight});

//                  判断南部区域存在，如果存在，需要重设南部区域的宽度
                    if (southLayout.length > 0) {
                        //获取南部区域的宽度
                        var sWidth = southLayout.width();
                        // 获取南部区域加border的宽度-普通宽度，为了求border 的大小
                        var soWidth = southLayout[0].offsetWidth - sWidth;
                        southLayout.css({
                            width: 'calc(100% - ' + nowWidth + ' - ' + soWidth + 'px)',
                            left: nowWidth
                        });
                    }
                    //判断中部区域和东部区域是否同时存在，因为中部区域是必须存在的，所以只需要判断东部区域是否存在即可
                    if (eastLayout.length > 0) {
                        //西部区域移动距离除2，求中部和东部需要改变的大小
                        changeSize = changeSize / 2;
                        //获取中部区域的宽度
                        var cWidth = centerLayout.width();

                        var coWidth = centerLayout[0].offsetWidth - cWidth;
                        //获取东部区域的宽度
                        var eWidth = eastLayout.width();
                        var eoWidth = eastLayout[0].offsetWidth - eWidth;
                        eWidth = ((eWidth + changeSize) / layoutWidth).toFixed(2) * 100 + "%";
                        //重设中部和东部的css
                        eastLayout.css({
                            width: 'calc(' + eWidth + ' - ' + eoWidth + 'px)',
                            left: 'calc(100% - ' + eWidth + ')'
                        });
                        centerLayout.css({
                            width: 'calc(100% - ' + eWidth + ' - ' + nowWidth + ' - ' + coWidth + 'px)',
                            left: nowWidth
                        });
                    }
                    else {//只有中部区域存在时
                        //获取中部区域的宽度
                        var cWidth = centerLayout.width();
                        var coWidth = centerLayout[0].offsetWidth - cWidth;
                        centerLayout.css({
                            width: 'calc(100% - ' + nowWidth + ' - ' + coWidth + 'px)',
                            left: nowWidth
                        });
                    }
                }
            })
        }
    }
    ,
    initEast: function ($layout, eastOptions, northOptions, southOptions, eastLayout, centerLayout, westLayout) {
        //获取设置的东部区域宽高
        var width = eastOptions.width;//东部区域的设置的宽度
        var nHeight = northOptions.height;//北部区域设置的高度
        var sHeight = southOptions.height;//南部区域设置的高度
        var borderWidth = eastOptions.borderWidth;//是否有边框
        var height = 'calc(100% - ' + nHeight + " - " + sHeight + " - " + borderWidth + "*2)";
        eastLayout.css({
            width: 'calc(' + width + ' - ' + borderWidth + ' * 2)',
            height: height,
            top: nHeight,
            borderWidth: borderWidth,
            minWidth: eastOptions.minWidth,
            maxWidth: eastOptions.maxWidth,
            minHeight: eastOptions.minHeight,
            maxHeight: height
        });
        //
        //判断是否可调整大小
        var spilt = eastOptions.split;
        if (spilt) {
            eastLayout.css({borderLeftWidth: '2px'});
            eastLayout.resizable2({
                handles: 'w',
                minWidth: eastOptions.minWidth,
                maxWidth: eastOptions.maxWidth,
                ghost: true,
                stop: function (event, ui) {

                    //获取移动之后的宽度
                    var nowWidth = $(this)[0].offsetWidth;
                    //获取父容器宽度
                    var layoutWidth = $layout.width();
                    //计算移动后的东部区域占布局宽度的百分比
                    // nowWidth = (nowWidth / layoutWidth).toFixed(2) * 100 + "%";
                    nowWidth += 'px';
                    //设置缩放后东部区域宽度，为了能够继续适配响应窗口
                    eastLayout.css({
                        width: 'calc(' + nowWidth + ' - 2px)'
                        , left: 'calc(100% - ' + nowWidth + ' - 1px)'
                        , height: height,
                        top: nHeight
                    });
                    //判断西部区域是否存在，如果存在计算宽度的百分比，用于中部区域调整大小使用
                    var woWidth = 0;
                    if (westLayout.length > 0) {
                        woWidth = westLayout[0].offsetWidth;
                    }
                    woWidth = (woWidth / layoutWidth).toFixed(2) * 100 + "%";

                    //获取中部区域的宽度
                    var cWidth = centerLayout.width();
                    var coWidth = centerLayout[0].offsetWidth - cWidth;
                    centerLayout.css({
                        width: 'calc(100% - ' + nowWidth + ' - ' + woWidth + ' - ' + coWidth + 'px)'
                    });

                }
            })

        }
    }
    ,
    initCenter: function ($layout, northOptions, southOptions, westOptions, eastOptions, centerOptions, centerLayout) {
        //获取设置的中间部区域宽高
        var nHeight = northOptions.height;//北部区域的设置的高度
        var sHeight = southOptions.height;//南部区域的设置的高度
        var wWidth = westOptions.width;//西部区域的设置的宽度
        var eWidth = eastOptions.width;//东部区域的设置的宽度
        var borderWidth = centerOptions.borderWidth;
        var width = 'calc(100% - ' + wWidth + ' - ' + eWidth + ' - ' + borderWidth + '*2)';
        var height = 'calc(100% - ' + nHeight + ' - ' + sHeight + ' - ' + borderWidth + '*2)';

        centerLayout.css({
            width: width,
            height: height,
            top: nHeight,
            left: wWidth,
            borderWidth: borderWidth,
            minWidth: centerOptions.minWidth,
            maxWidth: centerOptions.maxWidth,
            minHeight: centerOptions.minHeight,
            maxHeight: height
        });
    }
    ,
    initNorth: function ($layout, northOptions, northLayout) {
        //获取设置的北部区域宽高
        var height = northOptions.height;
        var split = northOptions.split;
        var borderWidth = northOptions.borderWidth;

        northLayout.css({
            width: 'calc(100% - ' + borderWidth + ' * 2)',
            height: 'calc(' + height + ' - ' + borderWidth + ' * 2)',
            borderWidth: borderWidth,
            minWidth: northOptions.minWidth,
            maxWidth: '100%',
            minHeight: northOptions.minHeight,
            maxHeight: northOptions.maxHeight
        });
    }
    ,
    initSouth: function ($layout, southOptions, westOptions, southLayout) {
        //获取设置的南部区域宽高
        var height = southOptions.height;
        var borderWidth = southOptions.borderWidth;
        var wWidth = westOptions.width;

        southLayout.css({
            width: 'calc(100% - ' + wWidth + ' - ' + borderWidth + ' * 2)',
            height: 'calc(' + height + ' - ' + borderWidth + ' * 2)',
            borderWidth: borderWidth,
            left: wWidth,
            minWidth: southOptions.minWidth,
            maxWidth: '100%',
            minHeight: southOptions.minHeight,
            maxHeight: southOptions.maxHeight
        });
    }
};

function dataOptions(str) {
    var dataOptions = {
        width: '0',
        height: '0',
        minWidth: '0',
        minHeight: '0',
        maxWidth: '100%',
        maxHeight: '100%',
        border: false,
        split: false
    }
    if (str != undefined && str.length > 0 && str.indexOf(":") > 0) {
        var arr = str.split(",");
        for (var i = 0; i < arr.length; i++) {
            var data = arr[i].split(":");
            if (data[1].startsWith("'") && data[1].endsWith("'")) {
                dataOptions[data[0]] = data[1].substring(1, data[1].length - 1);
            } else {
                dataOptions[data[0]] = data[1];
            }
        }
    }
    return {
        width: dataOptions.width.endsWith('%') ? dataOptions.width : dataOptions.width + 'px',
        height: dataOptions.height.endsWith('%') ? dataOptions.height : dataOptions.height + 'px',
        minWidth: dataOptions.minWidth.endsWith('%') ? dataOptions.minWidth : dataOptions.minWidth + 'px',
        minHeight: dataOptions.minHeight.endsWith('%') ? dataOptions.minHeight : dataOptions.minHeight + 'px',
        maxWidth: dataOptions.maxWidth.endsWith('%') ? dataOptions.maxWidth : dataOptions.maxWidth + 'px',
        maxHeight: dataOptions.maxHeight.endsWith('%') ? dataOptions.maxHeight : dataOptions.maxHeight + 'px',
        borderWidth: dataOptions.border == 'true' ? '1px' : '0px',
        split: dataOptions.split == 'true' ? true : false
    };
}

